<template>
  <div class="app-container">
    <el-form
      label-position="top"
      v-show="state.showSearch"
      :model="queryParams"
      ref="queryRef"
      :inline="true"
    >
      <el-form-item label="公司名称" prop="companyId">
        <ApiSelect
          class="form-input"
          v-model="queryParams.companyId"
          :options="companyOptions"
          valueField="companyId"
          labelField="name"
          clearable
        />
      </el-form-item>
      <el-form-item label="取消/退款编号" prop="refundSn">
        <el-input class="form-input" v-model="queryParams.refundSn" placeholder="取消/退款编号" />
      </el-form-item>
      <el-form-item label="设备编号" prop="machineId">
        <el-input class="form-input" v-model="queryParams.machineId" placeholder="设备编号" />
      </el-form-item>
      <el-form-item label="订单编号" prop="orderSn">
        <el-input class="form-input" v-model="queryParams.orderSn" placeholder="订单编号" />
      </el-form-item>
      <el-form-item label="订单状态" prop="payStatus">
        <el-select
          class="form-input"
          v-model="queryParams.payStatus"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="dict in order_stat_options"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="联系方式" prop="userMobile">
        <el-input class="form-input" v-model="queryParams.userMobile" placeholder="联系方式" />
      </el-form-item>
      <el-form-item label="餐品名称" prop="comboName">
        <el-input class="form-input" v-model="queryParams.comboName" placeholder="餐品名称" />
      </el-form-item>
      <el-form-item label="城市标签" prop="cityName">
        <el-select @change="getList" v-model="queryParams.cityName" placeholder="请选择">
          <el-option v-for="item in cityNameOptions" :key="item" :label="item" :value="item" />
        </el-select>
      </el-form-item>
      <el-form-item label="&nbsp;">
        <el-button @click="handleSearch(false)">重置</el-button>
        <el-button type="primary" @click="handleSearch(true)">查询</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          v-hasPermi="['order:refund:export']"
          type="primary"
          :disabled="disabled"
          @click="handleExport"
          >导出</el-button
        >
      </el-col>
      <right-toolbar v-model:showSearch="state.showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="state.loading" :data="tableList">
      <el-table-column type="selection" width="55" />
      <el-table-column label="取消/退款编号" align="center" prop="refundSn" width="170" sortable />
      <el-table-column label="订单编号" align="center" prop="orderSn" width="170" />
      <el-table-column label="订单状态" align="center" width="100">
        <template #default="{ row }">
          <dict-tag :options="order_status" :value="row.payStatus" />
        </template>
      </el-table-column>
      <el-table-column
        label="用户名称"
        align="center"
        prop="userName"
        min-width="120"
        :show-overflow-tooltip="true"
      />
      <el-table-column label="联系方式" align="center" prop="userMobile" width="120" />
      <el-table-column label="城市标签" align="center" prop="cityName" />
      <el-table-column label="餐品名称" align="center" prop="comboName" />
      <el-table-column label="取消/退款金额(元)" align="center" prop="refundAmt" width="140" />
      <el-table-column label="取消/退款原因" align="center" prop="refundReason" width="150" />
      <el-table-column label="申请时间" align="center" prop="refundForTim" width="110" />
      <el-table-column label="处理时间" align="center" prop="refundTime" width="110" />
      <el-table-column label="下单时间" align="center" prop="orderTime" width="110" />
      <el-table-column
        label="设备编号"
        align="center"
        prop="machineId"
        width="150"
        :show-overflow-tooltip="true"
      />
      <el-table-column label="设备名称" align="center" prop="machineName" />
      <el-table-column label="点位名称" align="center" prop="positionName" />
      <el-table-column label="操作" align="center" fixed="right" width="100">
        <template #default="{ row }">
          <el-button
            v-hasPermi="['order:refund:details']"
            link
            type="primary"
            @click="handleTableAction(row)"
            >详情</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="state.total > 0"
      :total="state.total"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script setup name="OrderList">
import useUserStore from '@/store/modules/user'
import { getOrderList } from '@/api/order/index'
import { onMountedOrActivated } from '@/hooks/common'
import useGlobalStore from '@/store/modules/global'

const globalStore = useGlobalStore()
const cityNameOptions = computed(() => globalStore.myCityList)

const router = useRouter()
const userStore = useUserStore()
const queryRef = ref(null)
const { proxy } = getCurrentInstance()
const { order_status, order_stat_options } = proxy.useDict('order_status', 'order_stat_options')

const tableList = ref([])
const companyOptions = computed(() => userStore.companys)
const queryParams = ref({
  type: 'refund',
  pageNum: 1,
  pageSize: 10,
  cityName: cityNameOptions.value[0]
})

const state = reactive({
  visible: false,
  showSearch: true,
  total: 0,
  loading: false
})

function handleSearch(confirm) {
  !confirm && queryRef.value?.resetFields()

  queryParams.value.pageNum = 1
  getList()
}

const disabled = ref(false)
function handleExport() {
  disabled.value = true
  proxy
    .download(
      '/org/orderList/derive',
      { ...queryParams.value },
      `取消/退款订单列表${new Date().getTime()}.xlsx`
    )
    .then(() => {
      disabled.value = false
    })
    .catch((err) => {
      disabled.value = false
    })
}

async function getList() {
  state.loading = true
  try {
    const r = await getOrderList(queryParams.value)
    tableList.value = r?.data ?? r?.rows
    state.total = r.total
  } finally {
    state.loading = false
  }
}

/**table Action */
function handleTableAction(obj) {
  router.push({ path: `/order/orderDetail`, query: { id: obj?.id } })
}

/**init +  onActivated*/
onMountedOrActivated(getList)
</script>

<style lang="scss" scoped>
.table-bottom {
  position: relative;
  .bottom-stat {
    position: absolute;
    top: 15px;
    left: 0;
    font-size: 14px;
    color: var(--el-pagination-text-color);
  }
}
.refund-dialog {
  line-height: 2em;
  .el-textarea {
    margin: 20px 0;
  }
}

.form-input {
  width: 210px;
}
</style>
